import React, { useState, useEffect } from 'react';
import { Modal, Button, Empty } from 'antd';

function ConditionView({ visiable, close, data, result }) {
  const [text, setText] = useState('');

  const changePreLog = value => {
    let chageValue = '';
    switch (value) {
      case '||':
        chageValue = 'OR';
        break;
      case '&&':
        chageValue = 'AND';
        break;
      default:
        break;
    }
    return chageValue;
  };

  const changeOptType = value => {
    const data = result.filter(function(item) {
      return item.attrValue === value;
    });
    return data[0].attrValueName;
  };

  useEffect(() => {
    let text = '';
    data.forEach((data1,index) => {
      let configValue = '';
      data1.map(item => {
        configValue = `${configValue}${configValue === '' ? '' : '、'}${
          item.attrValueName ? item.attrValueName : item.attrValue
        }`;
      });

      const curText = `${data1[0].leftBrackets ? data1[0].leftBrackets : ''}{${
        data1[0].attr.objName
      }.${data1[0].attr.attrName ? data1[0].attr.attrName : data1[0].attr.attrCode}$${changeOptType(
        data1[0].optType
      )}${configValue}}${data1[0].rightBrackets ? data1[0].rightBrackets : ''}${data.length-1 !== index? changePreLog(
        data1[0].preLog
      ):''}`;
      const nextText = `${text}${curText}`;
      text = nextText;
    });
    setText(text);
  }, []);

  return (
    <Modal
      title="条件预览"
      width="600px"
      destroyOnClose
      onCancel={close}
      footer={
        <Button type="default" onClick={close}>
          取消
        </Button>
      }
      visible={visiable}
    >
      {data.length ? (
        <span>{text}</span>
      ) : (
        <Empty description="条件暂无配置数据" image={Empty.PRESENTED_IMAGE_SIMPLE} />
      )}
    </Modal>
  );
}

export default ConditionView;
